<!--
 - Author : wang885298.
 - Date   : 2019/3/29.
 - File   : memberDetailMsg.人员详情组件
 -->

<template>
  <div class="memberDetailWrap">
    <msg labelWidth="343px" title="公众人员详情" :showMore=2 :clickCB="closeDetail" pos="absolute">
      <div class="force-detail"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.2)"
           v-loading="detailLoading">
        <div class="img-warper">
          <div :key="key" class="des-img" v-for="(item, key) in peopleDetail.touXiangLb">
            <img :src="item?(imgUrl + item):defaultUserPic" alt="">
          </div>
          <div class="des-img" v-if="peopleDetail.touXiangLb && peopleDetail.touXiangLb.length===0">
            <img src="../assets/images/defaultCaseUser.jpg" alt="">
          </div>
        </div>
        <div class="title">
          <h1>{{peopleDetail.xingMing}}</h1>
        </div>
        <div class="hengxian">
          <p class="p-line"><span>身份证：</span><span>{{peopleDetail.zhengJianhao}}</span></p>
          <div class="split">
            <p class="split-left"><span>性　别：</span>{{peopleDetail.xingBieMc||'暂无'}}</p>
            <p class="split-right"><span>民　族：</span>{{peopleDetail.minZuMc||'暂无'}}</p>
          </div>
          <div class="split">
            <p class="split-left"><span>出生日：</span>{{peopleDetail.chuShengRq||'暂无'}} </p>
            <p class="split-right"><span>婚　姻：</span>{{peopleDetail.hunYinZtMc||'暂无'}}</p>
          </div>
          <p class="p-line">
            <span>地　区：</span>
            <span>{{peopleDetail.shengFenMc}} {{peopleDetail.chengShiMc}} {{peopleDetail.quXianMc}}</span>
          </p>
          <p class="p-line">
            <span>户籍地：</span>
            <span>{{peopleDetail.huJiDz||'暂无'}}</span>
          </p>
        </div>
        <div class="th-line hengxian">
          <div class="split">
            <p class="split-left"><span>服务处所：</span>{{peopleDetail.fuWuCs||'暂无'}}</p>
            <p class="split-right"><span>职　业：</span>{{peopleDetail.zhiYeMc||'暂无'}}</p>
          </div>
          <p class="p-line">
            <span>文化程度：</span><span>{{peopleDetail.wenHuaCdMc||'暂无'}}</span>
          </p>
        </div>
        <div class="th-line hengxian">
          <div class="split">
            <p class="split-left"><span>身　　高：</span>{{peopleDetail.shenGao}}cm</p>
            <p class="split-right"><span>血　型：</span>{{peopleDetail.xueXingMc||'暂无'}}</p>
          </div>
          <p class="p-line">
            <span>移动电话：</span>
            <span>{{peopleDetail.yiDongDh||'暂无'}}</span>
          </p>
          <p class="p-line">
            <span>固定电话：</span>
            <span>{{peopleDetail.guDingDh||'暂无'}}</span>
          </p>
          <p class="p-line">
            <span>现居住地：</span>
            <span>{{peopleDetail.xianJuDZ||'暂无'}}</span>
          </p>
        </div>
        <div class="th-line" style="padding: 10px 0">
          <p class="p-line">
            <span>备　　注：</span><span>{{peopleDetail.beiZhu||'暂无'}}</span>
          </p>
        </div>
      </div>
    </msg>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        detailLoading: false,
        showDetail: false,
        imgUrl: window.localStorage.getItem('imgUrl'),
        defaultUserPic: require('../assets/images/defaultCaseUser.jpg')
      }
    },
    props: {
      peopleDetail: {}
    },
    methods: {
      /**
       * 关闭人员详情
       * @author whl
       */
      closeDetail() {
        this.$emit('closeDetail')
      }
    }
  }
</script>

<style ref="stylesheet/lesss" lang="less">
  @import "../assets/less/infoMsg";

  .memberDetailWrap {
    .title {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
      margin-top: 8px;

      h1 {
        font-size: 18px;
        color: #ffffff;
        font-weight: normal;

        span {
          background: rgba(47, 255, 6, .15);
          color: #00e60b;
          display: inline-block;
          padding: 0 8px;
          font-size: 13px;
          margin-left: 15px;
        }
      }

      h2 {
        margin-left: 35px;
        font-size: 14px;
        color: #62dcff;
        font-weight: normal;

        span {
          color: #fff;
          padding-right: 5px;
        }
      }
    }

    p {
      font-size: 14px;
      margin-bottom: 5px;
      color: #00ddc6;

      span {
        color: #62dcff;
        display: inline-block;
      }

      .letter {
        letter-spacing: 3px;
      }

      .letter2 {
        letter-spacing: 27px;
      }

      .letter3 {
        letter-spacing: 11px;
      }
    }

    .hengxian {
      padding: 10px 0;
      border-bottom: 1px solid #0a70ae;
    }

    .split {
      display: flex;

      &-left {
        flex: 1.5;
      }

      &-right {
        flex: 1;
      }

      span {
        width: auto;
        font-size: 14px;
        padding-right: 5px;
      }
    }
  }
</style>
